<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../assets/flexible/flexible_css.debug.js"></script>
    <script src="../assets/flexible/flexible.debug.js"></script>
    <link rel="stylesheet" href="../../node_modules/swiper/dist/css/swiper.min.css">
    <link rel="stylesheet" href="../css/loaders.min.css">
    <link rel="stylesheet" href="../css/index_dt.css">
</head>
<body>
    <header class="header">
        <fugure>
            <img src="../images/index-dt/jhy.png">
        </fugure>
        <ul class="hd-cont">
            <li>
                <a href="javascript:void(0);" class="active">热门</a>
            </li>
            <li>
                <a href="javascript:void(0);">关注</a>
            </li>
        </ul>
        <fugure>
            <img src="../images/index-dt/camera.png">
        </fugure>
    </header>

    <main class="main">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide dt_rm">
                    <figure>
                        <img src="../images/index-dt/banner.png">
                    </figure>
                    <div class="rm_cont">
                        <!-- <div class="list">
                            <figure>
                                <img src="../images/index-dt/list.png" class="list_banner">
                            </figure>
                            <h2>#我要上精选# @keep</h2>
                            <div class="info">
                                <div>
                                    <figure>
                                        <img src="../images/index-dt/list-tx.png">
                                    </figure>
                                    <p>Ewan自由潜水</p>
                                </div>
                                <p>249</p>
                            </div>
                        </div> -->
                    </div>
                </div>
                <div class="swiper-slide dt_gz">
                    <h2 class="gz_fx">发现通讯录里的keep小伙伴<a href="javascript:void(0)">点击查看</a></h2>
                    <div class="gz_title">
                        <p>已关注<span>0</span>个keeper</p>
                        <p>完成</p>
                    </div>
                    <div class="gz_cont">
                        <h2 class="tj">为你推荐</h2>
                         <div class="gz_list">
                           <!-- <div class="list_dt">
                                <div class="list_title">
                                    <figure>
                                        <img src="../images/index-dt/gz-tx.png">
                                    </figure>
                                    <div>
                                        <h2>HugeEgo</h2>
                                        <p>仙女都是喝露水的</p>
                                    </div>
                                    <button>关注</button>
                                </div>
                                <div class="log_pic">
                                    <figure>
                                        <img src="../images/index-dt/wm_log.png">
                                    </figure>
                                    <figure>
                                        <img src="../images/index-dt/wm_log.png">
                                    </figure>
                                    <figure>
                                        <img src="../images/index-dt/wm_log.png">
                                    </figure>
                                </div>
                                <p class="taste">可能感兴趣的人,减脂</p>
                            </div> -->
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </main>




    <footer class="footer">
        <a href="../html/index.html">
            <img src="../images/public/ft-xl-c.png">
            <p>训练</p>
        </a>
        <a href="../html/index_fx.html">
            <img src="../images/public/ft-fx.png">
            <p>发现</p>
        </a>
        <a href="../html/index_dt.html">
            <img src="../images/public/ft-dt-c.png" >
            <p>动态</p>
        </a>
        <a href="javascript:void(0)">
            <img src="../images/public/ft-wd.png">
            <p>我的</p>
        </a>
    </footer>
    <script src="../../node_modules/swiper/dist/js/swiper.min.js"></script>
    <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../assets/artTemplate/template-web.js"></script>
    <script type="text/html" id="template-item">
        {{each list v i}}
        <div class="list">
            <div class="list_con">
                <figure>
                    <img src="{{v.imgurl}}" class="list_banner">
                </figure>
                <h2>{{v.title}}</h2>
                <div class="info">
                    <div>
                        <figure>
                            <img src="{{v.tximgurl}}">
                        </figure>
                        <p>{{v.infotitle}}</p>
                    </div>
                    <p>{{v.infonum}}</p>
                </div>
            </div>
        </div>
        {{/each}}
    </script>
    <script type="text/html" id="gz_log">
        {{each list v i}}
        <div class="list_dt">
            <div class="list_title">
                <figure>
                    <img src="{{v.gz_tx}}">
                </figure>
                <div>
                    <h2>{{v.name}}</h2>
                    <p>{{v.title}}</p>
                </div>
                <button>关注</button>
            </div>
            <div class="log_pic">
                <figure>
                    <img src="{{v.wm_log}}">
                </figure>
                <figure>
                    <img src="{{v.wm_log}}">
                </figure>
                <figure>
                    <img src="{{v.wm_log}}">
                </figure>
            </div>
            <p class="taste">{{v.taste}}</p>
        </div>
        {{/each}}
    </script>
    <script>
         var mySwiper = new Swiper ('.swiper-container', {
            direction: 'horizontal',
            autoHeight: true,
            onTransitionEnd:function(swiper){
                $(".hd-cont>li").eq(swiper.activeIndex).trigger("click");
            }
        });
        $(".hd-cont>li").on("click",function(e){
            e.preventDefault();
            $(".active").removeClass("active");
            $(this).children().addClass("active");
            mySwiper.slideTo($(this).index());
        })
        $.ajax({
            url:"../json/data_dt.json",
            type:"get",
            beforeSend:function(){
                $(".rm_cont").html($("<div data-loader='circle' class='loading'></div>").show());
            },
            complete:function(){
                $(".loading").hide();
            },
            success:function(data){
                var str=template("template-item",{list:data});
                $(".rm_cont").html(str);
            }
        })
        $.ajax({
            url:"../json/gz_log.json",
            type:"get",
            beforeSend:function(){
                $(".gz_list").html($("<div data-loader='circle' class='loading'></div>").show());
            },
            complete:function(){
                $(".loading").hide();
            },
            success:function(data){
                var str=template("gz_log",{list:data});
                $(".gz_list").html(str);
            }
        })
    </script>
</body>
</html>